<script setup name="informdetail">
import { ref, reactive, onMounted, computed, watch, onBeforeUnmount, shallowRef, onBeforeMount } from 'vue';
import OAMain from '@/components/OAMain.vue';
import OADialog from '@/components/OADialog.vue';
import OAPagination from '@/components/OAPagination.vue';
import timeFormatter from '@/utils/timeFormatter';
import { useAuthStore } from '@/stores/auth';
import informHttp from '@/api/informHttp';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';

const route = useRoute()

let inform = reactive({
    title: "",
    content: "",
    create_time: "",
    author: {
        realname: "",
        departname: {
            name: ""
        }
    }
})

//如果用ref，其中的变量为null，在template渲染时找不到这个元素，所以用reactive
// let inform = ref([])

onMounted(async () => {
    try {
        const pk = route.params.pk
        console.log(pk)
        let data = await informHttp.getInformDetail(pk)
        // inform = data
        // console.log(inform.title)
        Object.assign(inform, data)
        await informHttp.readInform(pk)
    } catch (err) {
        ElMessage.error(err)
    }
    //发送请求，用于阅读通知
    
})

</script>


<template>
    <OAMain title="通知详情">
        <el-card>
            <template #header>
                <div style="text-align: center;">
                    <h2 style="padding-bottom: 20px;">{{ inform.title }}</h2>
                    <div>
                        <span style="margin-right: 20px;">作者：{{ inform.author.realname }}</span>
                        <span>发布时间：{{ timeFormatter.stringFromDateTime(inform.create_time) }}</span>
                    </div>
                </div>
            </template>
            <template #default>
                <div v-html="inform.content" class="content"></div>
            </template>
            <template #footer>阅读量：{{ inform.read_count }}</template>
        </el-card>
    </OAMain>
</template>


<style scoped>
.content ::v-deep(img) {
    max-width: 100%
}
</style>